<template>
    <div class="infoMent">
        <el-form :inline="true"  class="demo-form-inline" size="small">
  <el-form-item >
    <el-button type="primary" @click="addStudent">新增</el-button>
  </el-form-item>
</el-form>
        <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
    <el-table-column
      prop="father"
      label="父亲姓名">
    </el-table-column>
    <el-table-column
      prop="mather"
      label="母亲姓名">
    </el-table-column>
    <el-table-column
      prop="time"
      label="入校时间">
    </el-table-column>
    <el-table-column
      prop="address"
      label="家庭住址">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="联系方式">
    </el-table-column>
    <el-table-column label="操作">
        <template #default="scope">
            <el-button type="danger" size="mini" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)"></el-button>
        </template>
    </el-table-column>
  </el-table>
  <el-dialog :title="state?'添加学生信息':'修改学生信息'" :visible.sync="dialogFormVisible" width="500px">
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
      <el-input v-model="form.age" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
      <el-radio v-model="form.sex" label="1">男</el-radio>
      <el-radio v-model="form.sex" label="2">女</el-radio>
    </el-form-item>
    <el-form-item label="父亲姓名" :label-width="formLabelWidth" prop="father">
      <el-input v-model="form.father" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="母亲姓名" :label-width="formLabelWidth" prop="mather">
      <el-input v-model="form.mather" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="家庭住址" :label-width="formLabelWidth" prop="adress">
      <el-input v-model="form.adress" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="入校时间" :label-width="formLabelWidth" prop="time">
    <el-date-picker
      v-model="form.time"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期"  >  
    </el-date-picker>
    </el-form-item>
    <el-form-item label="联系方式" :label-width="formLabelWidth" prop="phone">
      <el-input v-model="form.phone" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="closeInfo('form')">取 消</el-button>
    <el-button type="primary" @click="sure('form')">确 定</el-button>
  </div>
</el-dialog>
    </div>
</template>
<script>
import {getData,changeInfo,delData} from '@/utils/table'
    export default {
    data(){
        return{
            tableData:[],
            dialogFormVisible:false,
            form:{
                name:"",
                age:"",
                sex:"1",
                father:"",
                mather:"",
                adress:"",
                time:"",
                phone:"",   
            },
            formLabelWidth:'80px',
            rules:{
              name:[{required: true, message:'请输入姓名'}],
              age:[{required: true, message:'请输入年龄'}],
              sex:[{required: true,}],
              adress:[{required: true, message:'请输入地址'}],
              time:[{required: true, message:'请输入入学时间'}],
              phone:[{required: true, message:'请输入联系方式'}]  ,           
            }
        }
    },
    created(){
      getData(this,'/info')
    },
    methods:{
        del(row){
          delData(this,'/info',row.id,getData)
        },
        edit(row){
          this.state = false
          this.form = {...row};
          this.dialogFormVisible = true;
        },
        closeInfo(form){
          this.$refs[form].resetFields()
          this.dialogFormVisible = false;
        },
        addStudent(){
          this.form={
                name:"",
                age:"",
                sex:"1",
                father:"",
                mather:"",
                adress:"",
                time:"",
                phone:"",   
            }
            this.state = true
            this.dialogFormVisible = true
        },
        sure(form){
            console.log(form ,this.form);
            this.$refs[form].validate(valid => {
              if (valid) {
                if(this.state){
                  changeInfo(this,'post','/info',this.form,getData)
              }else{
                changeInfo(this,'put','/info',this.form,getData)
              }
                }
            })
        }
    }
    }
</script>
<style lang="less">
.infoMent{
        .demo-form-inline, .el-form-item{
            text-align: left;
        }
    }
</style>